/**
 * 加载场景
 */
export default class PreloadScene extends Phaser.Scene {
    constructor() {
        super({key: "PreloadScene"});
    }

    preload() {
        this.load.image("bg", "bg.jpg")
        this.load.multiatlas('example01', `${window.imageSuffix}.json`, "assets/images");
        this.load.spritesheet({
            key: "dude",
            url: `dude.${window.imageSuffix}`,
            frameConfig: {
                frameWidth: 32,
                frameHeight: 48,
                startFrame: 0,
                endFrame: 8
            }
        })
        this.load.spritesheet({
            key: "baddie",
            url: `baddie.${window.imageSuffix}`,
            frameConfig: {
                frameWidth: 32,
                frameHeight: 32,
                startFrame: 0,
                endFrame: 3
            }
        })

        this.percentText = this.add.text(400, 270, "0%", {
            fontSize: "16px",
            color: "#ffffff",
            align: 'center'
        }).setOrigin(0.5, 0.5);

        this.assetText = this.add.text(400, 350, "", {
            fontSize: "16px",
            color: "#ffffff",
            align: 'center'
        }).setOrigin(0.5, 0.5);
        this.progressBar = this.add.graphics();
        this.progressBox = this.add.graphics();
        this.progressBox.fillStyle(0x222222, 0.8);
        this.progressBox.fillRect(300, 300, 200, 30);

        this.load.on('progress', value => {
            this.progressBar.clear()
            this.progressBar.fillStyle(0xffffff, 1)
            this.progressBar.fillRect(305, 305, 190 * value, 20)
            this.percentText.setText(parseInt(value * 100) + '%')
            if (value === 1) {
                this.startGame = this.add.text(400, 400, "start game", {
                    fontSize: "16px",
                    color: "#ffffff",
                    align: 'center'
                }).setOrigin(0.5, 0.5).setInteractive();
                this.startGame.once('pointerdown', function () {
                    this.scene.transition({
                        target: 'MainScene',
                        remove: true,
                        duration: 1000,
                        moveBelow: true,
                        ease: "easeOut",
                        onUpdate: this.transitionOut
                    });
                }, this);
            }
        });
        this.load.on('fileprogress', file => {
            this.assetText.setText('Loading asset: ' + file.key)
        });
    }

    create() {
        this.bg = this.add.tileSprite(400, 300, 800, 600, "bg");

        this.anims.create({
            key: "left",
            frames: this.anims.generateFrameNumbers("dude", {start: 0, end: 3}),
            frameRate: 10,
            repeat: -1
        })

        this.anims.create({
            key: "turn",
            frames: [{key: "dude", frame: 4}],
            frameRate: 20
        })

        this.anims.create({
            key: "right",
            frames: this.anims.generateFrameNumbers("dude", {start: 5, end: 8}),
            frameRate: 10,
            repeat: -1
        })

        this.anims.create({
            key: "baddie_left",
            frames: [{key: "baddie", frame: 0}],
            frameRate: 10,
            repeat: -1
        })

        this.anims.create({
            key: "baddie_right",
            frames: [{key: "baddie", frame: 3}],
            frameRate: 10,
            repeat: -1
        })

        this.container = this.add.container(0, 0, [this.bg, this.percentText, this.assetText, this.progressBar, this.progressBox, this.startGame]);
    }

    transitionOut(progress) {
        this.container.setY(-1800 * progress);
    }
}